﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
            <title></title>
            <style>
            select {
        width: 150px;
        height: 200px;
        background-color: #d7ff98;
    }
    </style>
    </head>
    <body>
    <select size="10" id="sel1">
        <option value="">香蕉</option>
        <option value="">苹果</option>
        <option value="">鸭梨</option>
        <option value="">橘子</option>
    </select>

    <input type="button" value=">>>"/>
    <input type="button" value="<<<"/>
    <input type="button" value=">"/>
    <input type="button" value="<"/>


    <select size="10" id="sel2">

    </select>

<script>

    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var btns = document.getElementsByTagName("input");


    btns[0].onclick = function () {
        var ops = sel1.children;
        for(var i=ops.length-1;i>=0;i--){
            sel2.appendChild(ops[ops.length-1-i]);
        }
    }
    btns[1].onclick = function () {
        var ops = sel2.children;
        for(var i=ops.length-1;i>=0;i--){
            sel1.appendChild(ops[ops.length-1-i]);
        }
    }

//    var con = sel1.innerHTML;
//    btns[0].onclick = function () {
//        sel2.innerHTML = con;
//        sel1.innerHTML = "";
//    }
//    btns[1].onclick = function () {
//        sel1.innerHTML = con;
//        sel2.innerHTML = "";
//    }





</script>




</body>
</html>